class Product {
  constructor() {
    this.baseUrl = 'http://localhost';
    this.tbody = document.querySelector('.table tbody');
    this.addBtn = document.querySelector('.container .add_btn');
    //模态框获取所有的输入框
    this.inputs = document.querySelectorAll('.form-horizontal .form-group input')
    this.init();
    this.add();
    this.del();
    this.edit();
  }
  //初始化
  init() {
    fetch1({
      url: this.baseUrl + '/day05/shop/php/getProd.php',
      type: "GET",
      dataType: 'json'
    }).then(res => {
      this.creatHtml(res)
    })
  }
  // 获取数据渲染页面
  creatHtml(res) {
    // console.log(res)
    let str = '';
    res.forEach(item => {
      str += `
    <tr>
    <td>
      <span class="hideen">${item.number}</span>
      <input type="number" class="form-control list_input" value="" required="required" pattern="" title="">
    </td>
    <td>
      <span class="hideen">${item.pname}</span>
      <input type="text" class="form-control list_input" value="" required="required" pattern="" title="">
    </td>
    <td>
      <span class="hideen">${item.price}</span>
      <input type="number" class="form-control list_input" value="" required="required" pattern="" title="">
    </td>
    <td>
      <span class="hideen">${item.count}</span>
      <input type="number" class="form-control list_input" value="" required="required" pattern="" title="">
    </td>
    <td class='btn_list'>
      <button type="button" class="btn btn-primary btn_eidt">编辑</button>
      <button type="button" class="btn btn-danger btn_del">删除</button>
      <button type="button" class="btn btn-warning  btn_sure">确认</button>
      <button type="button" class="btn btn-danger  btn_cancel">取消</button>
    </td>
  </tr>
    `
      //把字符串 加入到页面
      this.tbody.innerHTML = str;
    })
  }
  //添加
  add() {
    // console.log(this.addBtn)
    on(this.addBtn, 'click', () => {
      //获取文本框的对应数据
      let number = this.inputs[0].value,
        pname = this.inputs[1].value,
        price = this.inputs[2].value,
        count = this.inputs[3].value
      if (number === '' || pname === '' || count === '' || price === '') {
        alert('请不要输入空值！')
      } else {
        fetch1({
          url: this.baseUrl + '/day05/shop/php/addProd.php',
          type: 'GET',
          data: `number=${number}&pname=${pname}&count=${count}&price=${price}`,
          dataType: 'string'
        }).then(res => {
          const a = JSON.stringify(res) 
          console.log(a, a.code);
          //隐藏 后面那个面板  不能获取 其中的 msg 和  code
          $('#myModal').modal('hide');
          if (res) {
            this.init()
            alert('success add');
          }
        })
      }
    })
  }
  //删除数据
  del() {
    //因为我们的 删除按钮都是动态添加的 所有使用事件事件委派比较方便
    on(this.tbody, 'click', e => {
      e = e || window.event
      const target = e.target || e.srcElement
      if (target.nodeName === 'BUTTON' && target.className.indexOf('btn_del') != -1) {
        console.log('开始删除数据')
        // console.log(target.className);
        //target的父元素 td 的父元素tr 第一个子元素节点 td 第一个子元素节点span的内容
        const num1 = target.parentNode.parentNode;
        const num = num1.querySelector('td span').innerText;
        // console.log(num);
        fetch1({
          url: this.baseUrl + '/day05/shop/php/delProd.php',
          type: 'GET',
          data: `number=${num}`,
        }).then(res => {
          const ress = JSON.stringify(res);
          console.log(ress);
          // console.log(ress.code);
          // if (ress.code === 200) {
          this.init()
          // }
          // alert(ress.msg)
          alert('成功删除')
          this.init()
        })
      }
    })
  }
  //编辑
  edit() {
    on(this.tbody, 'click', e => {
      e = e || window.event;
      const target = e.target || e.srcElement;
      //判断编辑按钮的点击
      if (target.nodeName === "BUTTON" && target.className.indexOf('btn_eidt') != -1) {
        console.log('开始编辑');
        const inputs1 = target.parentNode.parentNode;
        //所有当前的搜说框
        const inputs = inputs1.querySelectorAll('td input');
        //所有的当前的字体
        const ei = inputs1.querySelectorAll('td .hideen');
        const ei_number = ei[0].innerText;
        const ei_pname = ei[1].innerText;
        const ei_price = ei[2].innerText;
        const ei_count = ei[3].innerText;
        inputs[0].value = ei_number;
        inputs[1].value = ei_pname;
        inputs[2].value = ei_price;
        inputs[3].value = ei_count;
        //分别获取按钮
        const btn_eidt = inputs1.querySelector('.btn_eidt')
        const btn_del = inputs1.querySelector('.btn_del')
        const btn_sure = inputs1.querySelector('.btn_sure')
        const btn_cancel = inputs1.querySelector('.btn_cancel')
        inputs.forEach(item => {
          item.style.display = 'block';
        })
        ei.forEach(item => {
          item.style.display = 'none';
        })
        btn_eidt.style.display = 'none';
        btn_del.style.display = 'none';
        btn_sure.style.display = 'block';
        btn_cancel.style.display = 'block';
      }
      //判断确认按钮点击
      if (target.nodeName === "BUTTON" && target.className.indexOf('btn_sure') != -1) {
        console.log('开始确认')
        const inputs1 = target.parentNode.parentNode;
        //所有当前的搜说框
        const inputs = inputs1.querySelectorAll('td input');
        //所有的当前的字体
        const ei = inputs1.querySelectorAll('td .hideen');
        //分别获取按钮
        const btn_eidt = inputs1.querySelector('.btn_eidt')
        const btn_del = inputs1.querySelector('.btn_del')
        const btn_sure = inputs1.querySelector('.btn_sure')
        const btn_cancel = inputs1.querySelector('.btn_cancel')
        //获取
        const number = inputs[0].value
        const pname = inputs[1].value
        const price = inputs[2].value
        const count = inputs[3].value
        console.log(number, pname, price, count)
        //之前的商品的number
        const oldNumber = inputs1.querySelector('td .hideen').innerText;
        if (number === '' || pname === '' || price === '' || count === '') {
          alert('无法输入空值')
        } else {
          fetch1({
            url: this.baseUrl + '/day05/shop/php/updateProd.php',
            type: "GET",
            data: `number=${number}&
            pname=${pname}&
            count=${count}&
            price=${price}&
            oldNumber=${oldNumber}`,
            dataType: 'string'
          }).then(res => {
            console.log(res);
            this.init();
            alert('修改成功');
            inputs.forEach(item => {
              item.style.display = 'none';
            })
            ei.forEach(item => {
              item.style.display = 'block';
            })
            btn_eidt.style.display = 'block';
            btn_del.style.display = 'block';
            btn_sure.style.display = 'none';
            btn_cancel.style.display = 'none';
          })
        }

      }
      //判断取消按钮点击
      if (target.nodeName === "BUTTON" && target.className.indexOf('btn_cancel') != -1) {
        console.log('开始删除')
        const inputs1 = target.parentNode.parentNode;
        //所有当前的搜说框
        const inputs = inputs1.querySelectorAll('td input');
        //所有的当前的字体
        const ei = inputs1.querySelectorAll('td .hideen');
        //分别获取按钮
        const btn_eidt = inputs1.querySelector('.btn_eidt')
        const btn_del = inputs1.querySelector('.btn_del')
        const btn_sure = inputs1.querySelector('.btn_sure')
        const btn_cancel = inputs1.querySelector('.btn_cancel')
        inputs.forEach(item => {
          item.style.display = 'none';
        })
        ei.forEach(item => {
          item.style.display = 'block';
        })
        btn_eidt.style.display = 'block';
        btn_del.style.display = 'block';
        btn_sure.style.display = 'none';
        btn_cancel.style.display = 'none';
      }
    })
  }
}